<!DOCTYPE HTML>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link rel="stylesheet" href="/assets/examples.css">
    <link rel="stylesheet" href="/js/plugins/layer/skin/layer.css" id="layui_layer_skinlayercss">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/uploadifive.css">
    <link type="text/css" rel="stylesheet" href="/js/plugins/layer/laydate/skins/default/laydate.css" id="LayDateSkin">
    <link href="/css/editor-style.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div>
    <h2 style="float: left">{{if .update}}更新{{else}}添加{{end}}</h2>
    <!--style给定宽度可以影响编辑器的最终宽度-->
    {{if .update}}<button class="btn btn-info" id="userinfo" title="{{.Article.UserId}}" type="button" style="float: right;margin-right: 30px;margin-top: 10px">上传者信息</button>{{end}}
</div>
<!--style给定宽度可以影响编辑器的最终宽度-->
<form id="FORM_validate" action="/article/{{if .update}}update{{else}}add{{end}}" method="post">
    <input id="form_Id" type="hidden" value="{{if .update}}{{.Article.Id}}{{end}}" name="{{if .update}}Id{{end}}">
    <div class="">
    	<div class="form-group col-md-12">
            <label class="col-md-2 control-label">标题：</label>
            <div class="col-md-8">
                <input id="form_Title" name="Title" class="form-control" placeholder="请在此输入" value="{{if .update}}{{.Article.Title}}{{end}}">
            </div>
            <div class="col-md-2"></div>
        </div>
        <div class="form-group col-md-12">
            <label class="col-md-2 control-label">副标题：</label>
            <div class="col-md-9">
                <input id="form_Introduction" name="Introduction" class="form-control" placeholder="请在此输入" value="{{if .update}}{{.Article.Introduction}}{{end}}">
            </div>
        </div>
		<div class="form-group col-md-12">
            <label class="col-md-2 control-label">作者：</label>
            <div class="col-md-2">
                <input id="form_Author" name="Author" class="form-control" placeholder="请在此输入" value="{{if .update}}{{.Article.Author}}{{end}}">
            </div>
            <div class="col-md-2"></div>
            {{if eq .utype 1000}}
                <label class="col-md-2 control-label">编辑时间：</label>
                <div class="col-md-4">
                    <input placeholder="YYYY-MM-DD hh:mm:ss" name="edittime"
                           value="{{if .update}}{{date .Article.EditTime "Y-m-d H:i:s"}}{{end}}"
                    onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"
                    class="laydate-icon form-control layer-date">
                </div>
            {{end}}
        </div>

		<input type="hidden" value="{{if .update}}{{date .Article.CreateTime "Y-m-d H:i:s"}}{{end}}" name="createtime">

        <div class="form-group col-md-12">
            <div class="col-md-2">
                <label class="control-label">列表页图片：</label>
                <input id="form_ListPicPath" type="hidden" name="ListPicPath" value="{{if .update}}{{.Article.ListPicPath}}{{end}}" required="" aria-required="true">
                <button id="file_upload_ListPicPath" name="file_upload_ListPicPath" type="file" multiple="true"></button>

            </div>
            <div class="col-md-9">
                <img id="form_pic_ListPicPath" src="{{if .update}}{{.Article.ListPicPath}}{{else}}/img/image.png{{end}}"
                     style="max-height: 380px;width: auto;">
            </div>
        </div>
		<div class="form-group col-md-12">
            <label class="col-md-2 control-label">内容：</label>
            <div class="col-md-3"><button class="btn btn-success" type="button" style="margin-bottom: 10px;" onclick="insertvideo()">插入视频或上传音乐</button>
            </div>
            <div class="col-md-12">
                <script type="text/plain" id="myEditor_Content" name="Content" style="width:100%;"></script>
            </div>
        </div>

        {{if eq .utype 1000}}
		<div class="form-group col-md-12">
            <label class="col-md-2 control-label">类型：</label>
            <div class="col-md-3">
                <select class="form-control m-b" name="ArticleType" id="form_ArticleType">
                    <option {{if .update}}{{if eq 0 .Article.ArticleType}}selected="selected"{{end}}{{else}}{{if eq 0 .Type}}selected="selected"{{end}}{{end}} value="0">活动资讯</option>
                    <option {{if .update}}{{if eq 1 .Article.ArticleType}}selected="selected"{{end}}{{else}}{{if eq 1 .Type}}selected="selected"{{end}}{{end}} value="1">作品选登</option>
                    <option {{if .update}}{{if eq 2 .Article.ArticleType}}selected="selected"{{end}}{{else}}{{if eq 2 .Type}}selected="selected"{{end}}{{end}} value="2">天使风采</option>
                    <option {{if .update}}{{if eq 3 .Article.ArticleType}}selected="selected"{{end}}{{else}}{{if eq 3 .Type}}selected="selected"{{end}}{{end}} value="3">读书会简介</option>
                    <option {{if .update}}{{if eq 4 .Article.ArticleType}}selected="selected"{{end}}{{else}}{{if eq 4 .Type}}selected="selected"{{end}}{{end}} value="4">读书会活动</option>
                    <option {{if .update}}{{if eq 5 .Article.ArticleType}}selected="selected"{{end}}{{else}}{{if eq 5 .Type}}selected="selected"{{end}}{{end}} value="5">书香讲堂</option>
                    <option {{if .update}}{{if eq 31 .Article.ArticleType}}selected="selected"{{end}}{{else}}{{if eq 31 .Type}}selected="selected"{{end}}{{end}} value="31">书香朗读</option>
                    <option {{if .update}}{{if eq 7 .Article.ArticleType}}selected="selected"{{end}}{{else}}{{if eq 7 .Type}}selected="selected"{{end}}{{end}} value="7">天使书坊</option>
                    <option {{if .update}}{{if eq 8 .Article.ArticleType}}selected="selected"{{end}}{{else}}{{if eq 8 .Type}}selected="selected"{{end}}{{end}} value="8">会员风采</option>
                </select>
            </div>
        </div>
        {{else}}
        <input type="hidden" value="{{if .update}}{{.Article.ArticleType}}{{else}}{{.Type}}{{end}}" name="ArticleType">
        {{end}}

		<div class="form-group col-md-12">
            <label class="col-md-2 control-label">是否可评论：</label>
            <div class="col-md-3">
                <select class="form-control m-b" name="CommentOrNot">
                    <option {{if .update}}{{if eq 0 .Article.CommentOrNot}}selected="selected"{{end}}{{end}} value="0">不可评论</option>
                    <option {{if .update}}{{if eq 1 .Article.CommentOrNot}}selected="selected"{{end}}{{end}} value="1">可评论</option>
                </select>
            </div>
        </div>

        {{if eq .utype 1000}}
		<div class="form-group col-md-12">
            <label class="col-md-2 control-label">状态：</label>
            <div class="col-md-3">
                <select class="form-control m-b" name="Status">
                    <option {{if .update}}{{if eq 0 .Article.Status}}selected="selected"{{end}}{{end}} value="0">未审核</option>
                    <option {{if .update}}{{if eq 1 .Article.Status}}selected="selected"{{end}}{{end}} value="1">驳回</option>
                    <option {{if .update}}{{if eq 2 .Article.Status}}selected="selected"{{end}}{{end}} value="2">初审</option>
                    <option {{if .update}}{{if eq 3 .Article.Status}}selected="selected"{{end}}{{end}} value="3">发布</option>
                </select>
            </div>
        </div>
        {{end}}

        {{if eq .Type 4}}
        <div class="form-group col-md-12">
            <label class="col-md-2 control-label">是否可线上报名：</label>
            <div class="col-md-3">
                <select class="form-control m-b" name="OnlineEnroll">
                    <option {{if .update}}{{if eq 0 .Article.OnlineEnroll}}selected="selected"{{end}}{{end}} value="0">否</option>
                    <option {{if .update}}{{if eq 1 .Article.OnlineEnroll}}selected="selected"{{end}}{{end}} value="1">是</option>
                </select>
            </div>
        </div>
        {{if eq .utype 1000}}
        <div class="form-group col-md-12">
            <label class="col-md-2 control-label">活动报名链接：</label>
            <div class="col-md-3">
                <input id="form_GoodsHref" name="GoodsHref" class="form-control" placeholder="请在此输入" value="{{if .update}}{{.Article.GoodsHref}}{{end}}">
            </div>
        </div>
        {{end}}
        {{end}}

        {{if eq .utype 1000}}
		<div class="form-group col-md-12">
            <label class="col-md-2 control-label">浏览人数：</label>
            <div class="col-md-3">
                <input id="form_BrowseCount" name="BrowseCount" class="form-control" placeholder="请在此输入" value="{{if .update}}{{.Article.BrowseCount}}{{end}}">
            </div>
        </div>
		<div class="form-group col-md-12">
            <label class="col-md-2 control-label">点赞人数：</label>
            <div class="col-md-3">
                <input id="form_StartCount" name="StartCount" class="form-control" placeholder="请在此输入" value="{{if .update}}{{.Article.StartCount}}{{end}}">
            </div>
        </div>
		<div class="form-group col-md-12">
            <label class="col-md-2 control-label">收藏人数：</label>
            <div class="col-md-3">
                <input id="form_WatchCount" name="WatchCount" class="form-control" placeholder="请在此输入" value="{{if .update}}{{.Article.WatchCount}}{{end}}">
            </div>
        </div>
        {{end}}

		<input type="hidden" value="{{if .update}}{{.Article.UserId}}{{end}}" name="UserId" id="articleuser">
		<input type="hidden" value="{{if .update}}{{.Article.CityId}}{{end}}" name="CityId">
		
    	<div class="form-group col-md-12">
            <div class="col-md-12 col-md-offset-3">
                <button class="btn btn-primary" type="submit">{{if .update}}{{.SubmitText}}{{else}}上传{{end}}</button>
                {{if .deniable}}
                <button class="btn btn-white" type="button" onclick="submitDeny()">驳回</button>
                {{end}}
                <button id="btn-preview" class="btn btn-info" type="button">预览</button>
            </div>
        </div>
    </div>
</form>
<div class="preview-layer">
    <div class="preview-bg"></div>
    <div class="preview-phone">
        <iframe id="preview-html" name="preview-html" src="/assets/preview-h5.html"></iframe>
    </div>
</div>



<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/layer/layer.min.js"></script>
<script src="/js/jquery.uploadifive.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor.all.min.js"></script>

<script type="text/javascript" src="/lang/zh-cn/zh-cn.js"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/js/plugins/validate/messages_zh.min.js"></script>


<!-- jQuery UI -->
<script src="/js/jquery-ui-1.10.4.min.js"></script>
<!-- laydate js -->
<script src="/js/plugins/layer/laydate/laydate.js"></script>

<!--form validate-->
<script>
    $().ready(function () {
        // validate the comment form when it is submitted
        $("#FORM_validate").validate({
            rules: {
                Title:{
                    required:true,
                    minlength: 2
                },
                Author:{
                    required:true,
                    minlength: 2
                }
            }
        });
    });
</script>

<!--pic upload-->
<script type="text/javascript">
    $(function () {

            $('#file_upload_ListPicPath').uploadifive({
                'formData': {
                    'Id': $("#form_Id").attr("value"),
                    'imagepath': $("#form_ListPicPath").attr("value"),
                    'ArticleType':$('#form_ArticleType option:selected').val()
                },
                'uploadScript': '/article/picUp',
                'fileTypeExts': '*.jpg; *.jpeg; *.png',
                'removeCompleted' : true,
                'fileSizeLimit':"10MB",
                'buttonClass':"btn-info",
                'multi': false,
                'onUploadComplete' : function(file, data) {
                    var url_new = $.parseJSON(data).Data;
                    $("#form_pic_ListPicPath").attr("src", url_new);
                    $("#form_ListPicPath").attr("value", url_new.substring(0, url_new.indexOf("?time")));
                },
                'onUploadError': function (file, errorCode, errorMsg, errorString) {
                    alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
                }
            });
            $("#userinfo").click(function () {
                layer.open({
                    type: 2,
                    title: '用户基本信息',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['380px', '370px'],
                    content: '/users/info?Id='+$("#articleuser").val()//iframe的url
                });
            });
    });
</script>

<!--实例化编辑器-->
<script type="text/javascript">
    var ue = UE.getEditor('myEditor_Content', {
        autoHeightEnabled: true,
        autoFloatEnabled: true,
        textarea: "Content",
        elementPathEnabled:false,
        retainOnlyLabelPasted:true,
        initialContent:{{.Article.Content}}
    });
</script>

<script>
    function submitDeny() {
        var form=$("#FORM_validate");
        // 创建Input
        var my_input = $('<input type="hidden" name="deny" value="denied" />');
        form.append(my_input);
        // 提交表单
        form.submit();
    }
</script>


<script>
    /**
     * 基于UEditor开发的H5图文页面编辑器
     * Create by YaoQiao on 2017-01-11
     */

    var htmlObject = {};
    (function(){
        init();
    })();


    function init(){
        createEditor();
        addEvent();
    }

    /**
     * 添加事件侦听
     */
    function addEvent(){
        //添加预览功能
        addPreviewFun();
    }

    /**
     * 创建编辑器
     */
    function createEditor(){
        //初始化编辑
        htmlObject.editor = ue;
    }


    /**
     * 添加预览功能
     */
    function addPreviewFun(){
        var pre_btn = $("#btn-preview");
        var pre_layer = $(".preview-layer");
        var pre_bg = $(".preview-bg");
        pre_btn.on("click",function(){
            updatePreviewHtml();
            pre_layer.show();
            resetPrePhoneCss();
        });
        pre_bg.on("click",function(){
            pre_layer.hide();
        });

        //预览图片居中样式
        var css_str = {};
        var pre_phone = $(".preview-phone");
        var pos_left = 0;
        var pos_top = 0;
        $(window).resize(resetPrePhoneCss);
        //重置预览手机页面的CSS
        function resetPrePhoneCss(){
            pos_left = $(window).width() / 2 - pre_phone.width() / 2;
            pos_top = $(window).height() / 2 - pre_phone.height() / 2;
            css_str = {
                left:pos_left + "px",
                top:pos_top + "px"
            }
            pre_phone.css(css_str);
        }
        //初始化时设置预览手机元素位置
        resetPrePhoneCss();
    }

    /**
     * 更新预览页面显示内容
     */
    function updatePreviewHtml(){
        var ifr_document = document.getElementById("preview-html").contentWindow.document;
        if(ifr_document){
            //设置标题
            var title_str = $("#article-title").val();
            var ifr_title = $(ifr_document).find(".article-title .title");
            ifr_title.html(title_str);
            //设置作者
            var author_str = $("#article-author").val();
            var ifr_author = $(ifr_document).find(".article-top .article-time");
            ifr_author.html(author_str);

        }
        //设置正文
        if(ifr_document && htmlObject.editor){
            var content_str = htmlObject.editor.getContent();
            var ifr_content = $(ifr_document).find(".article-content");
            ifr_content.html(content_str);
        }
    }

    var dialog = new UE.ui.Dialog({
        //指定弹出层中页面的路径，这里只能支持页面,因为跟addCustomizeDialog.js相同目录，所以无需加路径
        iframeUrl:"/js/dialogs/video/video.html",
        //需要指定当前的编辑器实例
        editor:ue,
        //指定dialog的名字
        name:"video",
        //dialog的标题
        title:"上传视频和音乐",
        className:"edui-for-insertvideo",
        //指定dialog的外围样式
        //如果给出了buttons就代表dialog有确定和取消
        buttons:[
            {
                className:'edui-okbutton',
                label:'确定',
                onclick:function () {
                    dialog.close(true);
                }
            },
            {
                className:'edui-cancelbutton',
                label:'取消',
                onclick:function () {
                    dialog.close(false);
                }
            }
        ]});

    function insertvideo() {
        dialog.render();
        dialog.open();
    }
    $(document).ready(function(){
        {{if .update}}{{else}}$("#form_Author").val("{{.username}}");{{end}}
    });

</script>

</body>
</html>